import Vue from 'vue';
import BizUserCard from '../component/business/BizUserCard/index.vue'
// import * as UserCardApi from '@src/api/UserCard'
import { Loading } from 'element-ui';
import i18n from '@src/locales';
let showCard = false
// 如果不显示卡片修改样式
setTimeout(()=>{
  showCard = localStorage.getItem('showUserCard') == 'true' || false
  if(!showCard){
    let styleElement = document.createElement('style');
    document.getElementsByTagName('head')[0].appendChild(styleElement);
    let newStyle = '.user-card-triggle{cursor:inherit;color:inherit!important;}.user-card-triggle span{cursor:inherit;color:inherit!important;}';
    styleElement.appendChild(document.createTextNode(newStyle))
  }
}, 1000)
Vue.use(Loading.directive)
let UserCard = Vue.extend(BizUserCard);
let userCard = new UserCard({
  i18n,
});
function openUserCard(event) {
  let divDom = document.createElement('div');
  divDom.id = 'user-card-container';
  divDom.ref = 'userCard';
  if (!document.getElementById('user-card-container')) {
    document.body.appendChild(divDom)
    userCard.$mount('#user-card-container');
  }
  setTimeout(()=>{
    userCard.open(event, localStorage.getItem('showUserCard') == 'true' || false);
  }, 50)
  Vue.prototype.$track.clickStat(Vue.prototype.$track.formatParams('SHOW_USER_CARD'));
}

Vue.prototype.$OpenUserCard = openUserCard;

/**
 * 人员卡片自定义指令
 */
const directive = {
  bind(el, binding, vnode){
    let option = binding.value || {};
    el.onclick = ()=>{
      openUserCard({user:{userId:option}, el})
    }
  },
  update(el, binding) {
    let option = binding.value || {};
    el.onclick = ()=>{
      openUserCard({user:{userId:option}, el})
    }
  }
};

export default directive;

/** exmaple */
{/*  <span v-user="userId">川杨</span>*/}

